<p><a href="/posts/1-my-first-post/" class="nav-list-item selected">My First Post</a></p>
            <p><a href="/posts/2-second-post/" class="nav-list-item ">My Second Post</a></p>
            <p><a href="/posts/3-third-post/" class="nav-list-item ">My Third Post</a></p>
            <p><a href="/posts/4-fourth-post/" class="nav-list-item ">My Fourth Post</a></p>
            <p><a href="/posts/5-fifth-post/" class="nav-list-item ">My Fifth Post</a></p>
            <p><a href="/posts/6-sixth-post/" class="nav-list-item ">My Sixth Post</a></p>
            <p><a href="/posts/7-blade-post/" class="nav-list-item ">My Blade Post</a></p>
    

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="http://jigsaw.test/css/main.css">
    </head>
    <body class="border-t-3 border-primary full-height">

        <nav class="navbar navbar-brand">
            <div class="container">
                <div class="navbar-content">
                    <div>
                        <a class="link-plain text-xxl flex-y-center" href="http://jigsaw.test">
                            <strong>Jigsaw Collections Demo</strong>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container m-xs-b-6">
            <div class="row">

                <div class="col-xs-4">
                    <nav class="nav-list">
    <a class="nav-list-item selected" href="http://jigsaw.test/posts">
        <icon></icon>Posts
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/pagination">
        <icon></icon>Pagination
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/categories/news">
        <icon></icon>Categories
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/people">
        <icon></icon>People
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/variables">
        <icon></icon>Variables
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/json-test.json">
        <icon></icon>JSON
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/text-test.txt">
        <icon></icon>Text
    </a>
</nav>
                    <div class="panel m-xs-t-6">
    <div class="panel-heading">
        <h4 class="text-sm wt-light text-uppercase text-brand">Page meta</h4>
    </div>

    <div class="panel-body">
        <div class="p-xs-b-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Filename:</p>
            <p class="p-xs-l-2 text-sm">1-my_First_post</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Extension:</p>
            <p class="p-xs-l-2 text-sm">md</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Path:</p>
            <p class="p-xs-l-2 text-sm">/posts/1-my-first-post/</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Base URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test/posts/1-my-first-post/</p>
        </div>

        <div class="p-xs-t-4">
            <p class="text-xs text-dark-soft text-uppercase">Global Variable:</p>
            <p class="p-xs-l-2 text-sm">some global variable</p>
        </div>
    </div>
</div>
                                    </div>

                <div class="col-xs-8 demo-page">
                        <h4 class="text-uppercase text-dark-soft wt-light">
        Collection Name: <strong>posts</strong>
        <br>
        Collection Name: <strong>posts</strong>
        <br>
        Total Posts: <strong>7</strong>
    </h4>

    <br>

    <h1>My First Post</h1>
    <h1>My Blade Post</h1>

    <p><small>By Adam Wathan · 04/12/2017 </small></p>
    <p><small>By Adam Wathan · 01/02/2016 </small></p>

    <div class="border-t border-b p-xs-t-6 m-xs-b-6">
        <p class="text-xs text-dark-soft">References to adjacent collection items:</p>

        <div class="row">
            <div class="col-xs-6 text-left">

                
            </div>

            <div class="col-xs-6 text-right">

                                <p><a href="http://jigsaw.test/posts/2-second-post/">
                    My Second Post
                    <icon class="chevron_right m-xs-l-2"></icon>
                </a></p>
                
            </div>
        </div>
    </div>

    <p>First post! abcdefzzzyyy</p>

<p>This is a standard <strong>Markdown</strong> post. Note that <code>section</code> is optional in the frontmatter if using <code>@yield('content')</code> in the parent template.</p>

<p>If using a different section name (e.g. <code>@yield('postContent')</code>), the <code>section</code> should be specified in the frontmatter.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum distinctio, laboriosam dolorem delectus voluptatem odio qui mollitia official.</p>

    <div class="border-t border-b m-xs-t-6 p-xs-y-6">
        <p class="text-xs text-dark-soft">User-defined helper function <code>preview()</code> from <code>collections.php</code>, invoked at the item level:</p>

        <p class="text-sm"><em>First post! abcdefzzzyyy

This is a standard Markdown post. Note that section is optional in the fro ...</em></p>
    </div>

        <div class="border-b p-xs-y-6">
        <p class="text-xs text-dark-soft">User-defined helper function, invoked on adjacent collection items</p>

        <h4><strong>My Second Post</strong></h4>

        <p class="text-sm"><em>This post does not have an author specified in the frontmatter, and so uses the default author from ...</em></p>
    </div>
    
    <div class="border-b p-xs-y-6">
        <p class="text-xs text-dark-soft">Access a Jigsaw Collection as Illuminate Collection</p>

        <h4>Related <a href="http://jigsaw.test/categories/news"><em>news</em></a> posts:</h4>

        <div class="row">
                        <div class="col-xs-9 col-xs-offset-3 p-xs-y-2 border-b">
                <a href="http://jigsaw.test/posts/1-my-first-post/">My First Post</a>:
                <em>First post! abcdefzzzyyy

This is a standard Markd...</em>
            </div>
                        <div class="col-xs-9 col-xs-offset-3 p-xs-y-2 border-b">
                <a href="http://jigsaw.test/posts/2-second-post/">My Second Post</a>:
                <em>This post does not have an author specified in the...</em>
            </div>
                        <div class="col-xs-9 col-xs-offset-3 p-xs-y-2 border-b">
                <a href="http://jigsaw.test/posts/5-fifth-post/">My Fifth Post</a>:
                <em>Normal Markdown post. Lorem ipsum dolor sit amet, ...</em>
            </div>
                        <div class="col-xs-9 col-xs-offset-3 p-xs-y-2 border-b">
                <a href="http://jigsaw.test/posts/7-blade-post/">My Blade Post</a>:
                <em>...</em>
            </div>
                    </div>
    </div>

    <div class="border-b p-xs-y-6">
        <p class="text-xs text-dark-soft">Dump of <code>$page</code> (can also be accessed as singular version of collection name, i.e. <code>$post</code>)</p>
    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<!DOCTYPE html>
